<template>
  <div class="main-wrapper">
    <div class="map-test">
        <!-- 工具栏 -->
        <div class="search-wrap">
          <div class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters" size="small">
              <el-form-item>
                <el-input
                  v-model="filters.city"
                  clearable
                  placeholder="请输入城市名称"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <MyTable 
          ref="mapTestTable"
          currentTable ="mapTestTable"
          :hasSelection="fromCreateTaskPage"
          :tableData="mapData" 
          :tableItem="columns"
          :total="total"
          @handlePageChange="handlePageChange"
          @selectionChange="handleSelectionChange"
          />
      </div>
  </div>
</template>
<script>
import MyTable from '@/components/MyTable'
import { fetchMapCaseList } from '@/api/case'
  export default {
    name: 'MapTest',
    components: { MyTable },
    data(){
      return {
        filters: {
          city: '',
        },
        mapData: [
        ],
        columns: [
          {
            name: '城市',
            prop: 'city',
            width: '200px'
          },
          {
            name: '经度',
            prop: 'longitude',
            width: '200px'
          },
          {
            name: '纬度',
            prop: 'latitude',
            width: ''
          },
        ],
        total: 0,
        pageIndex: 1,
        pageSize: 20,
        selectedMapCases: [],
      }
    },
    props: {
      fromCreateTaskPage: Boolean
    },
    watch: {
      filters: {
        deep: true,
        handler:function(){
          this.pageIndex = 1
          this.pageSize = 20
          this.getMapList()
        }
      }
    },
    mounted(){
      this.getMapList()
    },
    methods: {
      // 查询列表
      getMapList(){
        const params = {
          page_num: this.pageIndex,
          page_size: this.pageSize,
          city: this.filters.city,
          scene_mode: this.filters.scene_mode
        }
        fetchMapCaseList(params).then(res => {
          if(res && res.data){
            this.mapData = res.data
            this.total = res.total 
          }
        })
      },
      // 切换pagesize 、切换页码
      handlePageChange(pageData) {
        this.pageIndex = pageData.page_num
        this.pageSize = pageData.page_size
        this.getMapList()
      },
      // 选择
      handleSelectionChange(val) {
        this.selectedMapCases = val.map(item => {
          return item.ur_code
        })
        // // 如果该页面是从创建作业调用过来的，则执行下面这行，将选中的case_id 存入store
        if(this.fromCreateTaskPage){
          this.$store.dispatch('case/setSelectedCaseIds', this.selectedMapCases)
        }     
      },
    }
  }
</script>